<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="() => $emit('handleClose')"
  >
    <el-tree
      :data="pageData.authData"
      show-checkbox
      :default-checked-keys="pageData.selectedKey"
      node-key="id"
      check-strictly
      default-expand-all
      :expand-on-click-node="false"
    >
    </el-tree>
    <!-- <span>This is a message</span> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('handleClose')">取消</el-button>
        <el-button type="primary" @click="doSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { GET_ROLE_DETAIL } from '@/api/role'
const dialogVisible = true
const emits = defineEmits(['handleClose'])
const { roleId } = defineProps(['roleId'])
const doSubmit = () => {
  //构造添加用户接口使用的参数
  // let params = {
  //   name: ''
  // }
  //调用添加用户的接口
  emits('handleClose', true)
}
const pageData = reactive({
  authData: [],
  selectedKey: []
})
const getAuthData = () => {
  setTimeout(() => {
    pageData.authData = [
      {
        id: 0,
        label: 'Home',
        children: [
          {
            id: 40,
            parentId: 0,
            label: 'Home-Index'
          }
        ]
      },
      {
        id: 1,
        label: '用户管理',
        children: [
          // {
          //   id: 4,
          //   label: 'Level two 1-1',
          //   children: [
          //     {
          //       id: 9,
          //       label: 'Level three 1-1-1'
          //     },
          //     {
          //       id: 10,
          //       label: 'Level three 1-1-2'
          //     }
          //   ]
          // }
        ]
      },
      {
        id: 2,
        label: '角色管理',
        children: [
          {
            id: 5,
            parentId: 2,
            label: '添加角色'
          },
          {
            id: 6,
            parentId: 2,
            label: '权限配置'
          }
        ]
      },
      {
        id: 3,
        label: '权限管理',
        children: [
          {
            id: 7,
            label: 'Level two 3-1'
          },
          {
            id: 8,
            label: 'Level two 3-2'
          }
        ]
      },
      {
        id: 4,
        label: 'Abuot'
      }
    ]
  }, 2000)
}
const getRoleAuth = () => {
  GET_ROLE_DETAIL(roleId).then((res) => {
    console.log(res)
    pageData.selectedKey = res.authCodes.split(',')
  })
}
getAuthData()
getRoleAuth()
</script>

<style></style>
